<!DOCTYPE html>
<html>

{include file='public/header'}
<body>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="javascript:void(0)">首页</a>
            <a href="javascript:void(0)">分销中心</a>
            <a><cite>分销商今日充值</cite></a>
        </span>
        <a class="layui-btn layui-btn-small" id="reload" title="刷新">
            <i class="layui-icon" style="line-height:30px"><i class="iconfont">&#xe6aa;</i></i>
        </a>
    </div>
    <div class="x-body">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-inline">
                <label class="layui-form-label w-auto">分销商：</label>
                <div id="pMenu"></div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label w-auto">选择短剧：</label>
                <div id="pMenu1" style="width:100%;flex:1"></div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label w-auto">投放媒体：</label>
                <div id="pMedia" style="width:100%;flex:1"></div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label w-auto">投放渠道：</label>
                <div class="layui-input-inline" style="width:182px">
                    <select name="link_type" id="link_type">
                        <option value="">请选择</option>
                        <option value="1">微信小程序</option>
                        <option value="2">抖音小程序</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" style="margin-left: 10px;" lay-submit lay-filter="searchList">搜索</button>
                <button type="reset" id="resetList" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
        <table id="realTimeRecharge" lay-filter="realTimeRecharge"></table>
    </div>
    
    <script>
        let totalObj = {}
        let params = {
            elem: '#realTimeRecharge'
            , toolbar: true
            , url: '/admin/distribution/realTimeRecharge' //数据接口
            , id: 'realTimeRecharge'
            , limit:30
            , totalRow:true
            , height:'full-140'
            , cols: [[ //表头
                { field: 'id', title: '链接ID',align:'center' ,totalRowText: '总合计：' }
                , { field: 'distributor_name', title: '分销商名称', align:'center' }
                , { field: 'video_name', title: '短剧名称', align:'center' }
                , { field: 'new_recharge_number', title: '新充笔数', align:'center' }
                , { field: 'new_recharge_people_number', title: '新充人数', align:'center' }
                , { field: 'today_recharge_price', title: '今日充值金额', width:120, align:'center' }
                , { field: 'per_capita', title:'人均贡献', align:'center'}
                , { field: 'recharge_people_number', title: '充值人数', align:'center' }
                , { field: 'recharge_price', title: '充值金额', align:'center', sort:true }
                , { field: 'media_id', title: '投放媒体', align:'center', templet: function (d) {
                    return d.media_id == 1 ? '抖音' : d.media_id == 2 ? '快手' : d.media_id == 3 ? '百度' : d.media_id == 4 ? '腾讯' : '内推'
                }}
                , { field: 'echo_rate', title: '回传率' ,align:'center' }
                , { field: 'link_switch', title: '投放开关',align:'center', templet: function (d) {
                        return d.link_switch == 1 ? '开启' : '关闭'
                    } }
            ]]
            , customTotal:function(){
                getTotal('/admin/distribution/realTimeRechargeSum',totalObj).then(val=>{
                    totalObj = val
                })
            },
            done:function(){
                setPrice(totalObj)
            }
        }
        tableList(params)

        let selectParams = {
            url: '/admin/distribution/selectList',
            elem: '#pMenu',
            selected: [],
            tips: '选择分销商',
            name: 'distributor_id',
            field_id: 'id',
            field_Name: 'name',
        }
        selectN(selectParams)

        let selectParams1 = {
            url: '/admin/video/select',
            selected: [],
            tips: '选择短剧',
            name: 'video_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu1'
        }
        selectN(selectParams1)

        let selectMedia = {
            url: '/admin/launch/getLaunchMedia',
            selected: [],
            tips: '选择媒体',
            name: 'media_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMedia'
        }
        selectN(selectMedia)

        function setPrice(totalObj){
            $(`.layui-table-total td[data-field=new_recharge_people_number] .layui-table-cell`).text(totalObj?.new_people_number)
            $(`.layui-table-total td[data-field=new_recharge_number] .layui-table-cell`).text(totalObj?.new_frequency)

            $(`.layui-table-total td[data-field=today_recharge_price] .layui-table-cell`).text(totalObj?.total_recharge_price)
            $(`.layui-table-total td[data-field=recharge_people_number] .layui-table-cell`).text(totalObj?.total_people_number)
            $(`.layui-table-total td[data-field=per_capita] .layui-table-cell`).text(totalObj?.total_per_capita)
            $(`.layui-table-total td[data-field=recharge_price] .layui-table-cell`).text(totalObj?.total_recharge)
        }

        layui.use('table', function(){
            var table = layui.table;
            table.on('sort(realTimeRecharge)', function(obj){ 
                if(obj.field == 'recharge_price'){
                    recharge_price_sort = obj.type;
                }
                params.where = {...params.where,recharge_price_sort};
                params.initSort = obj;
                tableList(params)
            })
        });
    </script>
</body>

</html>